<style lang="scss" scoped>
@import "@/styles/mixins.scss";
@mixin add-after($color) {
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: $color;
  }
}
@mixin type-color($is: true) {
  &--error {
    background: $thin-error;
    @if $is {
      @include add-after($error);
    }
  }
  &--warning {
    background: $thin-warning;
    @if $is {
      @include add-after($warning);
    }
  }
  &--primary {
    background: $thin-primary;
    @if $is {
      @include add-after($primary);
    }
  }
  &--info {
    @if $is {
      background: $thin-primary;
      @include add-after($primary);
    } @else {
      background: #f8f8f8;
    }
  }
}
.xjw-chain {
  .xjw-chain_header {
    display: flex;
    .xjw-chain_dot {
      width: 36upx;
      height: 36upx;
      padding: 8upx;
      box-sizing: border-box;
      border-radius: 50%;
      display: flex;
      align-items: center;
      margin-right: 20upx;
      @include type-color;
    }
    .xjw-child_title {
      flex: 1;
      font-size: 28upx;
      color: $f303133;
    }
  }
  .xjw-chain_main {
    display: flex;
    padding: 16upx 0;
    .xjw-chain_line {
      width: 36upx;
      margin-right: 20upx;
      position: relative;
      flex-shrink: 0;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: 2upx;
        transform: translateX(-50%);
        background: #f0f2f5;
      }
    }
    .xjw-chain_pad-gap {
      flex: 1;
      padding: 16upx 0;
      .xjw-chain_slot-warp {
        border-radius: 8upx;
        padding: 32upx;
        box-sizing: border-box;
        @include type-color(false);
        .slot_title_head {
          display: flex;
          .slot_title_left {
            flex: 1;
            line-height: 1;
            .slot_title {
              font-size: 32upx;
              font-weight: bold;
              @include global-type-color("color");
            }
            .slot_title-tips {
              color: $f606266;
              font-size: 28upx;
            }
          }
          .slot_title_right {
            align-self: center;
          }
        }
      }
    }
  }
}
</style>
<template>
  <view class="xjw-chain">
    <view class="xjw-chain_header">
      <view class="xjw-chain_dot" :class="'xjw-chain_dot--' + type"> </view>
      <view class="xjw-child_title">
        <slot name="header"></slot>
      </view>
    </view>
    <view class="xjw-chain_main">
      <view class="xjw-chain_line"> </view>
      <view class="xjw-chain_pad-gap">
        <view
          class="xjw-chain_slot-warp"
          :class="'xjw-chain_slot-warp--' + type"
        >
          <view class="slot_title_head">
            <view class="slot_title_left">
              <view class="slot_title" :class="'slot_title--' + type">
                <slot name="title"></slot>
              </view>
              <view class="slot_title-tips">
                <slot name="titleTips"></slot>
              </view>
            </view>
            <view class="slot_title_right">
              <slot name="right"></slot>
            </view>
          </view>

          <slot name="message"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import { Component, Prop } from "vue-property-decorator";
import { Ttype } from "../types/type";

type TChain = Ttype | "info";

@Component
export default class Index extends Vue {
  @Prop({ type: String as PropType<TChain>, default: "primary" }) type;
}
</script>
